<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.box  {
				width: 350px;
				height: 350px;
				margin: 100px;
				border: 1px solid #ccc;
				position: relative;
				
			}
			.big {
				width: 400px;
				height: 400px;
				position: absolute;
				top: 0;
				left: 360px;
				border: 1px solid #ccc;
				overflow: hidden;
				display: none;
			}
			
			.big img {
				position: absolute;
			}
		
			.mask {
				width: 175px;
				height: 175px;
				background: rgba(255,255,0,.4);
				position: absolute;
				top: 0px;
				left: 0px;
				cursor: move;
				display: none;
			}
			
			.small {
				position: relative;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box">
	    	<div class="small">
	    		<img src="img/b2.jpg" width="350" alt="">
				<div class="mask"></div>
	    	</div>	
			<div class="big">
				<img src="img/b1.jpg" width="900" alt="" >
			</div>
		</div>
	
		<script>
			// IE浏览器对webp不支持
			// webp 比jpg 体积小
			var box = document.querySelector('.box');
			var smallBox = box.children[0];
			var bigBox = box.children[1];
			
			var smallImage = smallBox.children[0];
			var mask = smallBox.children[1];
			var bigImage = bigBox.children[0];
			
			// 1.鼠标经过的时候, 显示 mask 和 big , 当鼠标离开box的时候隐藏mask和big
			
			// 解决IE浏览器兼容问题
			// 鼠标放到box出现闪屏问题
			// onmouseover 和 onmouseout 会触发事件冒泡
		   // mouseenter mouseleave 不会触发事件冒泡
		   // mouseover mouseout 会触发事件冒泡
			box.onmouseenter = function(){
				// 显示 mask 和 bigBox
				mask.style.display = 'block';
				bigBox.style.display = 'block';
			}
			
			box.onmouseleave = function(){
				// 显示 mask 和 bigBox
				mask.style.display = 'none';
				bigBox.style.display = 'none';
			}
			// 2.当鼠标在盒子中移动的时候, 让mask和鼠标一起移动
			box.onmousemove = function(e){
				e = e || window.event;
				// 获取鼠标在盒子中的位置, 就是 mask的坐标
				var maskX =e.pageX - box.offsetLeft;
				var maskY = e.pageY - box.offsetTop;
				
				// 让鼠标出现在mask的中心点
				maskX = maskX - mask.offsetWidth / 2;
				maskY = maskY - mask.offsetHeight / 2;
				
				// 把mask限制到box中
				maskX = maskX < 0 ? 0 : maskX;
				maskY = maskY < 0 ? 0 : maskY;
				
				maskX = maskX > box.offsetWidth - mask.offsetWidth ? box.offsetWidth - mask.offsetWidth : maskX;
				maskY = maskY > box.offsetHeight - mask.offsetHeight ? box.offsetHeight - mask.offsetHeight : maskY;
				
				mask.style.left = maskX + 'px';
				mask.style.top = maskY + 'px';
				
	         // 3.当mask移动的时候, 让大图片移动
             // 求 大图片移动的距离
				   
             // mask移动的距离 / mask最大能够移动的距离 = 大图片移动的距离 / 大图片最大能够移动的距离
				
				// mask 最大能够移动的距离
				var maskMax = box.offsetWidth - mask.offsetWidth;
				
				// 大图片最大能够移动的距离
				var bigImageMax = bigImage.offsetWidth - bigBox.offsetWidth;
				
				var bigImageX = maskX * bigImageMax / maskMax;
				var bigImageY = maskY * bigImageMax / maskMax;　
			
				bigImage.style.left = -bigImageX +'px';
				bigImage.style.top = -bigImageY  + 'px';
			}

		</script>

		
	</body>
</html>
			